<template>
	<view class="page">
		<image v-if="bgUrl" :src="bgUrl" class="bg-img" mode="widthFix"></image>
		 <up-navbar
			:bgColor="bgColor?bgColor:'rgba(240,22,9,'+(scrollTop/10)+')'"
			:title="title"
			:title-color="titleColor"
			:autoBack="false"
			:left-icon-color="leftIconColor"
			placeholder
		>
			<template  #left>
				<view class="logo" v-if="!autoBack">
					<image v-if="logo" :src="logo" class="logo-img" mode="heightFix"></image>
					<image v-if="logoText" :src="logoText" class="logo-text" mode="heightFix"></image>
				</view>
				<up-icon v-else @click="back" name="arrow-left" :color="leftIconColor" size="40rpx"></up-icon>
			</template>
		</up-navbar>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	let props = defineProps({
			autoBack:{
				type:Boolean,
				default:false
			},
			leftIconColor:{
				type:String,
				default:'#000'
			},
			bgUrl:{
				type:String,
				default:''
			},
			bgColor:{
				type:String,
				default:''
			},
			logo:{
				type:String,
				default:''
			},
			logoText:{
				type:String,
				default:''
			},
			scrollTop:{
				type:Number,
				default:0
			},
			title:{
				type:String,
				default:''
			},
			titleColor:{
				type:String,
				default:'#000'
			},
		});
	const back=async ()=>{
		try {
			await uni.navigateBack()
		} catch (error) {
			//TODO handle the exception
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	.bg-img{
		position: absolute;
		top:0;left:0;
		width:100%;height:920rpx;
		// z-index: -1;
	}
	.logo{
		display: flex;
		align-items: flex-end;
		.logo-img{
			width:91rpx;
			height:40rpx;
		}
		.logo-text{
			width:216rpx;
			height:28rpx;
			margin-left:16rpx;
		}
	}
</style>